<!--
 * @Description: 
 * @Description: 
 * @Version: 2.0
 * @Autor: LMJ
 * @Date: 2021-09-10 11:04:58
 * @LastEditors: LMJ
 * @LastEditTime: 2021-09-17 13:11:44
-->
<template>
  <div id="mains">
    <div id="Echars"></div>
  </div>
</template>

<script>
const echarts = require("echarts/lib/echarts");
require("echarts/lib/component/title");
require("echarts/lib/component/toolbox");
require("echarts/lib/component/tooltip");
require("echarts/lib/component/grid");
require("echarts/lib/component/legend");
require("echarts/lib/chart/line");
var charts = {};
export default {
  data() {
    return {
      chartData: [
        [120, 132, 101, 134, 90, 230, 210],
        [220, 182, 191, 234, 290, 330, 310],
      ],
    };
  },
  created() {},
  mounted() {
    this.init();
    //根据浏览器宽度变化改变可视化报表图宽高
    window.addEventListener("resize", () => {
      charts.resize();
    });
  },
  methods: {
    init() {
      charts = echarts.init(document.getElementById("Echars"));
      charts.setOption({
        title: {
          text: "每日实际产量",
          left: "center",
          textStyle: {
            color: "#06f1ef",
          },
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["每日目标产量", "每日实际产量"],
          top: "8%",
          textStyle: {
            color: "#ffffff",
          },
        },
        grid: {
          left: "8%",
          right: "3%",
          bottom: "10%",
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        xAxis: {
          type: "category",
          data: ["01", "02", "03", "04", "05", "06", "07"],
          splitLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
            lineStyle: {
              color: "#06f1ef",
            },
          },
        },
        yAxis: {
          type: "value",
          axisLine: {
            lineStyle: {
              color: "#06f1ef",
            },
          },
        },
        series: [
          {
            name: "每日目标产量",
            type: "line",
            data: this.chartData[0],
            lineStyle: {
              width: 5,
              color: "#F5802E",
            },
            label: {
              show: true,
              position: "inside",
              formatter: "{c}",
              color: "#ffffff",
              textStyle: {
                fontSize: 16,
                fontWeight: "bold",
              },
            },
            // itemStyle: {
            //     normal: {
            //         lineStyle: {
            //             color: '#00FF00'
            //         }
            //     }
            // },
          },
          {
            name: "每日实际产量",
            type: "line",
            lineStyle: {
              width: 5,
              color: "#5FA2DB",
            },
            data: this.chartData[1],
            label: {
              show: true,
              position: "inside",
              formatter: "{c}",
              color: "#ffffff",
              textStyle: {
                fontSize: 16,
                fontWeight: "bold",
              },
            },
          },
        ],
      });
    },
  },
};
</script>

<style scoped lang="scss">
#mains {
  width: 100%;
  height: 100%;
  #Echars {
    width: 100%;
    height: 100%;
  }
}
</style>
